<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onBeforeMount, onMounted, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
let logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []
const forInit = proxy.$Init || {}
const forFees = proxy.$Fees || []

/* ---- */
const user = reactive({
  company: proxy.$Myfun.setText(forInit.company_title),
  desc: proxy.$Myfun.setText(forInit.company_desc),
  advs: [],
  telphone: proxy.$telPhone,
  wechat_img: proxy.$imgEwm,
  // ----
  title: proxy.$Myfun.setText(forInit.club_page_title),
  // ----
  share_title: proxy.$Myfun.setText(forInit.club_share_title) || proxy.$shareTitle,
  share_desc: proxy.$Myfun.setText(forInit.club_share_desc) || proxy.$shareDesc,
  share_icon: proxy.$shareIcon,
  // ----
  showFot: false,
  // ----
  forFocus: false,
  focuslink: '',
  isSubscribe: userInfo.subscribe,
  // ----
  storePayId: 0,
  storeFeeId: 'marketing',
  storeFeeVal: 0,
  storeFeeUnit: '',
  storeFeeUse: true,
  storeInfo: '市场营销',
  storeBtnTxt: '我要开通',
  storeFlash: false,
  storeTime: '',
  isStore: Number(logUser.is_store) === 1,
  // ----
  funcName: 'operat',
  funcs: [],
  operatInfo: '招商招聘',
  operatBtnTxt: '我要加入',
  operatFlash: false,
  operatTime: '',
  isOperat: false,
  // ----
  customInfo: '定制功能',
  // ----
  intend: [],
  // ----
  forAdm: String(proxy.$Phone) === String(logUser.telphone)
})
// ----
const forAdvs = ref([])
const forFree = 3 / 1
const setTrueStyle = ref({})
// ----
const menu_one = [{
  show: true,
  name: '商务中心',
  icon: 'fa fa-house-chimney',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'UcenTer') }
}, {
  show: true,
  name: '我们在哪',
  icon: 'fa fa-map-marked-alt',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'OfficeShare') }
}, {
  show: true,
  name: '我要咨询',
  icon: 'fa fa-user-headset',
  callback: () => {
    let options = {
      title: proxy.$Global.layer.titleTwo + user.telphone,
      content: proxy.$Global.layer.conEver,
      button: [{
        text: proxy.$Global.layer.btnCancel
      }, {
        text: proxy.$Global.layer.btnAsk,
        class: 'xw-color-24',
        callback: () => { window.location.href = 'tel:' + user.telphone }
      }]
    }
    if (user.wechat_img) {
      options = {
        title: proxy.$Global.layer.titleFour,
        content: '<div style="padding: 0 2.4rem;"><img src="' + user.wechat_img + '" style="width: 100%;"/></div>',
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: proxy.$Global.layer.btnAsk,
          class: 'xw-color-24',
          callback: () => { window.location.href = 'tel:' + user.telphone }
        }]
      }
    }
    proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
  }
}, {
  show: true,
  name: '我的信息',
  icon: 'fa fa-images-user',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForInfo') }
}]
// ----
const menu_two = [{
  show: true,
  name: '万域商友',
  icon: 'fa fa-people-roof xw-color-1',
  callback: () => {
    if (user.isStore || !user.storeFeeUse || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'FriendShare')
    } else {
      getAuditFun(3)
    }
  }
}, {
  show: true,
  name: '发现商机',
  icon: 'fa fa-briefcase-clock xw-color-2',
  callback: () => {
    if (user.isStore || !user.storeFeeUse || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'OpportShare')
    } else {
      getAuditFun(3)
    }
  }
}, {
  show: true,
  name: '赞助推广',
  icon: 'fa fa-trophy-star xw-color-3',
  callback: () => {
    if (user.isStore || !user.storeFeeUse || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'SponsorShare')
    } else {
      getAuditFun(3)
    }
  }
}, {
  show: true,
  name: '移动门店',
  icon: 'fa fa-mobile-signal-out xw-color-4',
  callback: () => {
    if (user.isStore || !user.storeFeeUse || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'ForStore')
    } else {
      getAuditFun(3)
    }
  }
}, {
  show: true,
  name: '批发市场',
  icon: 'fa fa-cart-flatbed-boxes xw-color-5',
  callback: () => {
    if (user.isStore || !user.storeFeeUse || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'WholeSale')
    } else {
      getAuditFun(3)
    }
  }
}, {
  show: true,
  name: '云仓进销',
  icon: 'fa fa-cloud-download-alt xw-color-6',
  callback: () => {
    if (user.isStore || !user.storeFeeUse || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'CloudShare')
    } else {
      getAuditFun(3)
    }
  }
}]
// ----
const menu_three = [{
  show: true,
  name: '推广销售',
  icon: 'fa fa-star xw-color-9',
  callback: () => {
    if (user.isOperat || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'PromoteSys')
    } else {
      getAuditFun(5)
    }
  }
}, {
  show: true,
  name: '客户列表',
  icon: 'fa fa-memo-circle-check xw-color-7',
  callback: () => {
    if (user.isOperat || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'PromoteReg')
    } else {
      getAuditFun(5)
    }
  }
}, {
  show: true,
  name: '佣金提现',
  icon: 'fa fa-donate xw-color-8',
  callback: () => {
    if (user.isOperat || user.forAdm) {
      proxy.$Myfun.openPage(proxy, 'push', 'ForCommission')
    } else {
      getAuditFun(5)
    }
  }
}]
// ----
const customArr = [{
  show: false,
  name: '',
  key: 'material',
  icon: 'fa fa-book-atlas xw-color-10',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForMaterial') }
}, {
  show: false,
  name: '',
  key: 'album',
  icon: 'fa fa-sign xw-color-11',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'AlbumList') }
}, {
  show: false,
  name: '',
  key: 'wholesaler',
  icon: 'fa fa-user-tie xw-color-4',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'WholeUserShare') }
}, {
  show: false,
  name: '',
  key: 'contract',
  icon: 'fa fa-file-contract xw-color-5',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ContractList') }
}]
const menu_four = ref([])

/* ---- */
const preImg = ref()
const layer = ref()
const layerBox = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// --设置微信分享--
const setWebShare = (info) => {
  const forSn = proxy.$Store.get('SN')
  const currentUrl = window.location.href.split('#')[0]
  const shareLink = (Number(currentUrl.indexOf('sn=')) === Number(-1)) ? ((Number(currentUrl.indexOf('?')) === Number(-1)) ? currentUrl + '?sn=' + forSn : currentUrl + '&sn=' + forSn) : currentUrl
  proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
    if (!obj) return
    // ----
    obj.hideMenuItem()
    obj.showMenuList(['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'])
    // ----
    obj.share({
      title: info.title,
      desc: info.desc,
      link: shareLink,
      imgUrl: info.imgUrl
    })
  })
}
// ----
const setFocus = () => {
  user.forFocus = true
}
// ----
const getTrueStyle = () => {
  if (proxy.$refs.forTrueWidth) {
    const imgEL = proxy.$refs.forTrueWidth
    const imgRatio = forFree
    setTrueStyle.value = { height: `${Math.round(imgEL.offsetWidth / imgRatio)}px` }
  }
}
// ----
const setFuncOpen = async (name, item, extra, callback, func) => {
  const deadline = user.funcs
  const isFuncInfo = deadline.some((curItem) => {
    if (String(curItem.name) === String(name)) {
      if (item) curItem.intend = item
      return true
    }
  })
  if (!isFuncInfo) {
    let theItem = {
      name: name,
      starttime: '0000-00-00 00:00:00',
      endtime: '0000-00-00 00:00:00'
    }
    if (func) {
      theItem = {
        name: name,
        intend: item || [],
        starttime: '0000-00-00 00:00:00',
        endtime: '0000-00-00 00:00:00'
      }
    }
    deadline.push(theItem)
  }
  const forLineData = JSON.stringify(deadline)
  // ----
  let forData = {
    topuptw: forLineData,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  Object.assign(forData, extra.data)
  await proxy.$http.patch('dealer/update?id=' + logUser.id, forData).then((res) => {
    logUser = res
    proxy.$Store.set('logUser', res, () => { callback && callback() })
  }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  if (extra.toast) proxy.$Myfun.forToast(layer.value, 'open', extra.toast)
}
// ----
const getIsOperatInfo = () => {
  if (Number(logUser.is_agent) === 1) {
    let forOperatTime = ''
    let amountDate = 0
    const curDate = Date.parse(new Date())
    proxy.$Myfun.getJsonData(logUser.topuptw, (resJson) => { user.funcs = resJson })
    user.funcs.some((oneItem) => {
      if (String(oneItem.name) === String(user.funcName)) {
        forOperatTime = String(oneItem.endtime).split(' ')[0]
        amountDate = Date.parse(new Date(oneItem.endtime.replace(/-/g, '/'))) || 0
      }
    })
    if (Number(amountDate) >= Number(curDate)) {
      user.operatTime = '有效期至：' + proxy.$Myfun.getDateShort(forOperatTime)
      user.isOperat = true
    } else if (Number(amountDate) === 0) {
      user.operatTime = '合作报名提交成功，等待洽谈！'
      user.isOperat = false
    }
  }else{
    proxy.$Myfun.getJsonData(logUser.topuptw, (resJson) => { user.funcs = resJson })
    user.funcs.some((item) => {
      if(item.isRecord == 1){
        user.operatBtnTxt = '再次加入'
        return
      }
    })
  }
}
// ----
const getCurrencyInfo = async () => {
  setTimeout(() => { user.showFot = true }, 300)
  // --获取关注链接--
  const focusItems = forSys.filter((item) => { return String(item.name) === 'market_focuslink' })
  if (Number(focusItems.length) === 1) {
    proxy.$Myfun.getJsonData(focusItems[0].value, (resJson) => {
      if (Number(resJson.length) > 0) user.focuslink = proxy.$Myfun.setText(resJson[0].link)
    })
  }
  // --获取功能意向--
  const intendItems = forSys.filter((item) => { return String(item.name) === 'market_payIntend' })
  if (Number(intendItems.length) === 1) {
    proxy.$Myfun.getJsonData(intendItems[0].value, (resJson) => {
      if (Number(resJson.length) > 0) {
        if (resJson[0].list && Number(resJson[0].list.length) > 0) {
          resJson[0].list.forEach((item, index) => {
            user.intend.push({
              id: item.id,
              light: false,
              text: proxy.$Myfun.setText(item.text),
              desc: proxy.$Myfun.setText(item.remark)
            })
          })
        }
      }
    })
  }
  // --用户信息--
  if (logUser.name) user.company = proxy.$Myfun.setText(logUser.name)
  if (logUser.remark) user.desc = proxy.$Myfun.setText(logUser.remark)
  const imgItems = []
  await proxy.$Myfun.getJsonData(logUser.intention, (resJson) => {
    resJson.forEach((curItem) => {
      imgItems.push({
        msrc: curItem.image,
        src: curItem.image,
        width: curItem.width,
        height: curItem.height,
        alt: ''
      })
    })
  })
  user.advs = imgItems
  // ----
  let workLine = []
  await proxy.$Myfun.getJsonData(logUser.topupze, (resJson) => { workLine = resJson })
  // --获取购买市场营销信息--
  forFees.some((item) => {
    if (String(item.id) === String(user.storeFeeId)) {
      user.storeFeeVal = Number(item.amount)
      user.storeFeeUnit = item.typeText
      user.storeFeeUse = item.isOpenUse
    }
  })
  if (user.isStore && user.storeFeeUse) {
    workLine.some((oneItem) => {
      if (String(oneItem.id) === String(user.storeFeeId)) {
        oneItem.info.some((twoItem) => {
          if (String(twoItem.id) === String(user.storePayId)) user.storeTime = '有效期至：' + proxy.$Myfun.getDateShort(twoItem.endtime)
        })
      }
    })
  }
  // --获取开通联合运营有效期--
  getIsOperatInfo()
  // --获取系统广告图片--
  const forImgData = {
    params: {
      'AdsSearch[type]': 1,
      // ----
      sort: 'SORT_ASC',
      // ----
      page: 1,
      PageSize: 1000000
    }
  }
  await proxy.$Axios.all([
    proxy.$Axios.get('ads/index', forImgData)
  ]).then(proxy.$Axios.spread((imgData) => {
    const newItems = []
    imgData.items.forEach((item) => {
      let forAdv = ''
      proxy.$Myfun.getJsonData(item.img_json, (resJson) => { forAdv = resJson[0].image })
      // ----
      newItems.push({
        id: item.id,
        image: forAdv,
        callback: () => {
          if (item.link_url && Number(item.link_url.length) > 0) window.location.href = item.link_url
        }
      })
    })
    if (Number(newItems.length) > 0) forAdvs.value = newItems
  })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // --获取定制功能--
  const customItems = forSys.filter((item) => { return String(item.name) === 'market_customFuncUser' })
  if (Number(customItems.length) === 1) {
    proxy.$Myfun.getJsonData(customItems[0].value, (resJson) => {
      if (Number(resJson.length) > 0) {
        customArr.forEach((item) => {
          if (resJson[0][item.key] && Number(resJson[0][item.key].length) > 0) {
            item.show = resJson[0][item.key].some((curItem) => {
              if (String(curItem.telphone) === String(logUser.telphone)) {
                item.name = curItem.name
                return true
              }
            })
          }
        })
      }
    })
  }
  const customFuncs = []
  customArr.forEach((item) => { if (item.show) customFuncs.push(item) })
  menu_four.value = customFuncs
  // --设置网页title--
  const forTitle = user.title || document.title
  setAppTitle(forTitle)
  // --设置微信分享功能--
  const forShare = {
    title: user.share_title,
    desc: user.share_desc,
    imgUrl: user.share_icon
  }
  setWebShare(forShare)
}
// ----
const getHeadFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      window.location.href = user.focuslink
      break
    }
    case 2: {
      user.forFocus = false
      break
    }
    case 3: {
      const curEL = event.currentTarget
      const options = {
        actElement: curEL,
        addopt: {
          loop: true,
          dataSource: user.advs
        }
      }
      proxy.$Myfun.isIndepth(preImg.value, 'openPhotoSwipe', options)
      break
    }
    case 4: {
      proxy.$Myfun.openPage(proxy, 'push', 'InfoAdm')
      break
    }
  }
}
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      item.callback && item.callback(item)
      break
    }
    case 2: {
      const options = {
        type: 6,
        maxCount: 500,
        boxStyle: { width: '70%' },
        title: '欢迎使用【市场营销】系统',
        content: '费用：' + user.storeFeeVal + '元/' + user.storeFeeUnit,
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: '我来付费',
          class: 'xw-color-24',
          callback: (count) => {
            layerBox.value.close()
            // ----
            const lookGiveNum = forInit.look_num || 0
            const releaseGiveNum = forInit.release_num || 0
            const forToPay = { payType: user.storeFeeId, regType: 'jobs', payId: user.storePayId, payIdKey: 'jobs_id', payCount: count }
            const forExtend = { name: 'TransitPage', opts: { forAttr: 'is_store,dealer_views,opport_views', forVal: '1,' + Number(count * lookGiveNum) + ',' + Number(count * releaseGiveNum), forType: 'shopFee' } }
            proxy.$Myfun.openPage(proxy, 'push', 'PaySys', { toPay: JSON.stringify(forToPay), exTend: JSON.stringify(forExtend) })
          }
        }]
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 3: {
      user.storeFlash = true
      setTimeout(() => { user.storeFlash = false }, 800)
      break
    }
    case 4: {
      const options = {
        type: 5,
        content: '请选择合作意向',
        listData: user.intend,
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: '提交意向',
          class: 'xw-color-24',
          callback: (info) => {
            if (Number(info.length) === 0) {
              proxy.$Myfun.forToast(layer.value, 'open', '请选择合作意向！')
              return false
            }
            // ----
            layerBox.value.close()
            // ----
            const forInfo = []
            info.forEach((curItem) => {
              forInfo.push(curItem.id)
            })
            setFuncOpen(user.funcName, forInfo, { data: { is_agent: 1 }, toast: '合作意向提交成功，等待洽谈！' }, () => {
              getIsOperatInfo()
            }, true)
          }
        }]
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 5: {
      user.operatFlash = true
      setTimeout(() => { user.operatFlash = false }, 800)
      break
    }
  }
}

/* ---- */
onBeforeMount(() => {
  getCurrencyInfo()
})
onMounted(() => {
  if (Number(user.isSubscribe) === 0) setTimeout(() => { setFocus() }, 2000)
  setTimeout(() => { getTrueStyle() }, 100)
})
onBeforeRouteLeave(() => {
  setTimeout(() => { user.showFot = false }, 300)
  // ----
  proxy.$Myfun.setScrollTop(proxy.$refs.formSection)
})
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <transition name="slideDownFade">
      <div class="user-focus xw-radius-3 xw-bg-white xw-flex xw-flex-align xw-flex-justify" v-if="user.forFocus">
        <div class="UFS-info xw-color-19 xw-ellipsis-2 xw-flex-W1">关注微信公众号，回家不迷路</div>
        <div class="UFS-btn-start" @click="getHeadFun(1)">立即关注</div>
        <div class="UFS-btn-close xw-act" @click="getHeadFun(2)"><em class="fa fa-times-circle"></em></div>
      </div>
    </transition>
    <!---->
    <div class="user-info xw-flex xw-flex-align">
      <div class="user-avatar xw-radius-3 xw-act" @click="getHeadFun(3)" v-if="Number(user.advs.length) > 0"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + user.advs[0].src + ')' }"></div></div>
      <div class="user-name xw-act xw-flex-W1" @click="getHeadFun(4)" v-if="user.company">
        <h1 class="xw-ellipsis-2">{{user.company}}</h1>
      </div>
    </div>
    <!---->
    <div class="list-li"><div ref="forTrueWidth"></div></div>
    <div class="user-banner" v-if="Number(forAdvs.length) > 0">
      <swiper :style="setTrueStyle">
        <swiper-slide class="xw-act" v-for="(item, index) in forAdvs" @click="getAuditFun(1, item)"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></swiper-slide>
      </swiper>
    </div>
    <!---->
    <div class="menuTwo xw-bg-white xw-radius-3" v-if="Number(menu_two.length) > 0">
      <div class="MTO-top xw-Bfg xw-flex xw-flex-align xw-flex-justify" v-if="!user.forAdm">
        <b>{{user.storeInfo}}</b>
        <span class="xw-color-13" v-if="user.storeTime" v-html="user.storeTime"></span>
        <a class="xw-btn xw-WBlue" :class="{'xw-flash': user.storeFlash}" @click="getAuditFun(2)" v-else-if="user.storeFeeUse">{{user.storeBtnTxt}}</a>
      </div>
      <div class="MTO-box xw-flex xw-flex-align xw-flex-wrap">
        <template v-for="(item, index) in menu_two">
        <a class="xw-flex-BW3 xw-flex xw-flex-center xw-flex-column" @click="getAuditFun(1, item)" v-if="item.show"><em :class="item.icon"></em>{{item.name}}</a>
        </template>
      </div>
    </div>
    <!---->
    <div class="menuThree xw-bg-white xw-radius-3" v-if="Number(menu_three.length) > 0">
      <div class="MTE-top xw-Bfg xw-flex xw-flex-align xw-flex-justify" v-if="!user.forAdm">
        <b>{{user.operatInfo}}</b>
        <span class="xw-color-13" :class="{'xw-flash': user.operatFlash}" v-if="user.operatTime" v-html="user.operatTime"></span>
        <a class="xw-btn xw-WBlue" :class="{'xw-flash': user.operatFlash}" @click="getAuditFun(4)" v-else>{{user.operatBtnTxt}}</a>
      </div>
      <div class="MTE-box xw-flex xw-flex-align xw-flex-wrap">
        <template v-for="(item, index) in menu_three">
        <a class="xw-flex-BW3 xw-flex xw-flex-center xw-flex-column" @click="getAuditFun(1, item)" v-if="item.show"><em :class="item.icon"></em>{{item.name}}</a>
        </template>
      </div>
    </div>
    <!---->
    <div class="menuFour xw-bg-white xw-radius-3" v-if="Number(menu_four.length) > 0">
      <div class="MFR-top xw-Bfg xw-flex xw-flex-align xw-flex-justify" v-if="!user.forAdm">
        <b>{{user.customInfo}}</b>
      </div>
      <div class="MFR-box xw-flex xw-flex-align xw-flex-wrap">
        <template v-for="(item, index) in menu_four">
        <a class="xw-flex-BW3 xw-ellipsis xw-flex xw-flex-center xw-flex-column" @click="getAuditFun(1, item)" v-if="item.show"><em :class="item.icon"></em>{{item.name}}</a>
        </template>
      </div>
    </div>
    <!---->
    <transition name="slideUpFade">
      <footer v-if="user.showFot">
        <div class="tabs xw-foot-Tfg xw-flex">
          <template v-for="(item, index) in menu_one">
          <a :class="{'active': Number(index) === 0}" class="xw-flex-W1 xw-flex xw-flex-center" @click="getAuditFun(1, item)" v-if="item.show">
            <span><em :class="item.icon"></em>{{item.name}}</span>
          </a>
          </template>
        </div>
      </footer>
    </transition>
    <preImg-view ref="preImg"/>
    <layer-view ref="layerBox"/>
    <layer-view ref="layer"/>
  </div>
</template>

<style scoped>
/* ---- */
.mescroll-touch { margin-bottom: 5.4rem; }

/* ---- */
.user-focus { position: relative; margin: 0.5rem 1rem 0; padding: 0.5rem 1rem; }
.UFS-info { font-size: 1.2rem; }
.UFS-btn-close { margin: 0 0 0 1rem; color: #e3dbcf; }
.UFS-btn-close em { font-size: 2rem; }
.UFS-btn-start { margin-left: 0.5rem; padding: 0 1rem; height: 2.4rem; line-height: 2.4rem; font-size: 1.2rem; color: #b18c44; background: #f3ece1; border-radius: 2rem; }
.UFS-btn-start:active { color: #ffffff; background: #b18c44; }

/* ---- */
.user-banner { margin-bottom: 1rem; }

/* ---- */
.menuTwo { margin: 0 1rem 1rem; padding: 1rem; }
.MTO-top { padding: 0 0 1rem; }
.MTO-top b { padding: 0 0 0 1rem; font-size: 1.6rem; border-left: 0.5rem solid #ff5722; }
.MTO-top span { padding: 0.6rem 0; }
.MTO-box a { padding: 1.4rem 0; border-style: solid; border-color: #e5e5e5; border-width: 1px 0 0 1px; }
.MTO-box a:nth-of-type(1), .MTO-box a:nth-of-type(2), .MTO-box a:nth-of-type(3) { border-top-width: 0; }
.MTO-box a:nth-of-type(3n-2) { border-left-width: 0; }
.MTO-box em { height: 3.4rem; line-height: 3.4rem; font-size: 2.4rem; }

/* ---- */
.menuThree { margin: 0 1rem 1rem; padding: 1rem; }
.MTE-top { padding: 0 0 1rem; }
.MTE-top b { padding: 0 0 0 1rem; font-size: 1.6rem; border-left: 0.5rem solid #ff5722; }
.MTE-top span { padding: 0.6rem 0; }
.MTE-box a { padding: 1.4rem 0; border-style: solid; border-color: #e5e5e5; border-width: 1px 0 0 1px; }
.MTE-box a:nth-of-type(1), .MTE-box a:nth-of-type(2), .MTE-box a:nth-of-type(3) { border-top-width: 0; }
.MTE-box a:nth-of-type(3n-2) { border-left-width: 0; }
.MTE-box em { height: 3.4rem; line-height: 3.4rem; font-size: 2.4rem; }

/* ---- */
.menuFour { margin: 0 1rem 1rem; padding: 1rem; }
.MFR-top { padding: 0 0 1rem; }
.MFR-top b { margin: 0.5rem 0; padding: 0 0 0 1rem; font-size: 1.6rem; border-left: 0.5rem solid #ff5722; }
.MFR-top span { padding: 0.6rem 0; }
.MFR-box a { padding: 1.4rem 0; border-style: solid; border-color: #e5e5e5; border-width: 1px 0 0 1px; }
.MFR-box a:nth-of-type(1), .MFR-box a:nth-of-type(2), .MFR-box a:nth-of-type(3) { border-top-width: 0; }
.MFR-box a:nth-of-type(3n-2) { border-left-width: 0; }
.MFR-box em { height: 3.4rem; line-height: 3.4rem; font-size: 2.4rem; }
</style>